<%@ page import="cn.labbook.bluetooth.constant.TenantPayConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  %>
  <base href="<%=basePath%>">
  <title>蓝牙电表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
  <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
  /*让徽章上下居中*/
  .layui-badge {
    top: 50%;
    transform: translateY(-50%);
  }
</style>
<body>
<div>
  <div class=" clearfix margin-15">
    <div class="layui-col-md12">
      <div class="layui-card-header">
        充值记录列表
      </div>
      <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
           lay-filter="layadmin-userfront-formlist" id="searchForm">
        <div class="layui-form-item searchDiv" style="margin-bottom: 0">
          <div class="layui-inline">
            <label class="layui-form-label" style="text-align: left">电表序号</label>
            <div class="layui-input-block">
              <input type="text" placeholder="请输入电表序号" autocomplete="off"
                     class="layui-input" id="ammeterId">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" id="time" autocomplete="off" placeholder="请选择日期范围">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block ">
              <select name="status" id="status">
                <option value="">请选择</option>
                <option value=0>未支付</option>
                <option value=1>付款成功且房东收款</option>
                <option value=2>付款成功且房东未收款</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                    lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
        <div class="layui-tab-content">
          <div class="layui-btn-div">
            <button class="layui-btn" id="export">流水导出</button>
          </div>
        </div>
      </div>
      <div class="layui-tab-content">
        <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
      </div>
    </div>
  </div>
</div>
<div id="deductDiv" class="divHideLayer">
  <form class="layui-form" lay-filter="deductForm" id="deductForm">
    <table class="table_all">
      <tbody>
      <tr style="display: none">
        <th>支付记录Id</th>
        <td>
          <input type="text" name="tenantPayId" lay-verify="" autocomplete="off"
                 class="layui-input layui-form-danger" placeholder="" id="tenantPayId">
        </td>
      </tr>
      <tr>
        <th><span class="red">*</span>转账金额</th>
        <td>
          <input type="text" name="trueAmount" lay-verify="required|number" autocomplete="off"
                 class="layui-input layui-form-danger" placeholder="" id="trueAmount">
        </td>
      </tr>
      <tr>
        <th>备注说明</th>
        <td>
          <input type="text" name="remark" lay-verify="required" autocomplete="off"
                 class="layui-input layui-form-danger" placeholder="" id="remark">
        </td>
      </tr>
      </tbody>
    </table>
    <div class="layui-form-item">
      <div class="submitForm">
        <button class="layui-btn" type="button" lay-submit="" lay-filter="deductSubmit" id="submit">提交</button>
        <button type="button" class="layui-btn layui-btn-primary" id="cancel" onclick="hideFun()">取消</button>
      </div>
    </div>
  </form>
</div>
<script type="text/html" id="barDemo">
  {{#  if(d.payStatus == 0 && d.isArrive == 1 ){ }}
  <a class="btn-white btn-warning layui-btn-xs" lay-event="edit">重新打款</a>
  <a class="btn-white btn-danger layui-btn-xs" lay-event="man">人工打款</a>
  <a class="btn-white btn-primary layui-btn-xs" lay-event="deduct">扣款转账</a>
  {{#  } }}
</script>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>


  var ammeterId = null;
  $(function () {
    layui.use(['table', 'form', 'laydate'], function () {
      var table = layui.table,
        form = layui.form;
      laydate = layui.laydate;
      laydate.render({
        elem: '#time'
        , range: true
      });
      var data = [
        {type: 'numbers', title: '序号'},
        {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
        {field: 'location', title: '电表地址', sort: false, align: 'center'},
        {field: 'mobile', title: '房东手机号', sort: false, align: 'center'},
        {field: 'payAmouont', title: '充值金额', sort: false, align: 'center'},
        {field: 'managerAmount', title: '房东到账金额', sort: false, align: 'center'},
        {field: 'payTrueAmouont', title: '写入电表金额', sort: false, align: 'center'},
        {field: 'wxPlatformAmount', title: '微信平台费', sort: false, align: 'center'},
        {field: 'zkisPlatformAmount', title: '电表运营费', sort: false, align: 'center'},
        {field: 'payTime', title: '交易时间', sort: false, align: 'center'},
        {
          field: 'status',
          width: 250,
          title: '交易步骤',
          sort: false,
          align: 'center',
          templet: function (d) {
            if (d.payStatus == 0 && d.isArrive == 0) return '<span class="layui-badge layui-bg-blue">付款成功且房东收款</span>'
            else if (d.payStatus == 0 && d.isArrive == 1) return '<span class="layui-badge layui-bg-red">付款成功但房东未收款</span>'
            else return '<span class="layui-badge layui-bg-cyan">未付款</span>'
          }
        },
        {title: '操作', width: 240, sort: false, align: 'center', toolbar: '#barDemo'},
      ];
      table.render(
        renderTable("#payPmList", 'tenantPay/pageAdmin', data)
      );
      table.on('tool(payPmList)', function (obj) {
        var data = obj.data;
        ammeterId = data.ammeterId
        if (obj.event === "edit") {
          layer.confirm('确定重新打款？', function (index) {
            postAjaxReq("tenantPay/retryPay", {
              "tenant_pay_id": data.tenantPayId,
              "ammeterId": data.ammeterId,
              "amount": data.payAmouont
            }, function (res) {
              if (res.code == 1) {
                obj.del();
                layer.msg("操作成功")
                table.reload('payPmList')
                adminId = null
              } else {
                layer.msg(res.msg)
              }

            });
            layer.close(index);
          })
        }
        if (obj.event === "man") {
          console.log(data)
          layer.confirm('确认已线下转账给房东？', function (index) {
            console.log(data)
            postAjaxReq("tenantPay/manRetryPay", {
              "tenant_pay_id": data.tenantPayId,
              "ammeterId": data.ammeterId,
              "amount": data.payAmouont
            }, function (res) {
              if (res.code == 1) {
                obj.del();
                layer.msg("操作成功")
                table.reload('payPmList')
                adminId = null
              } else {
                layer.msg(res.msg)
              }

            });
            layer.close(index);
          })
        }
        if (obj.event === "deduct") {
          layer.open({
            type: 1,
            title: "扣款转账",
            btnAlign: "c",
            offset: ['150px'],
            area: ['400px', '250px'],
            content: $("#deductDiv"),
            success: function () {
              form.val('deductForm', {
                "tenantPayId": data.tenantPayId,
                "trueAmount": data.trueAmount,
                "remark": data.remark
              })
            },
            end: function (i) {
              layer.close(i)
              hideWithReset("#deductDiv", "#deductForm")
            }
          })
        }
      });
      $("#export").click(function () {
        var ammeterId = $("#ammeterId").val();
        var timeBegin = null;
        var timeEnd = null;
        if (!isEmpty($("#time").val())) {
          var split = $("#time").val().split(" - ");
          timeBegin = split[0].trim();
          timeEnd = split[1].trim();
        }
        location.href = "<%=basePath%>tenantPay/guestRechargeAdmin?ammeterId=" + ammeterId + "&timeBegin=" + timeBegin + "&timeEnd=" + timeEnd
      })

      form.on('submit(activateSubmit)', function (obj) {
        var url = "ammeter/activate"
        var data = obj.field
        postAjaxReq(url, data, function (res) {
          if (res.code == 1) {
            layer.closeAll();
            table.reload('payPmList');
            layer.msg("激活成功")
          } else {
            layer.msg(res.msg)
          }
        })
      });

      form.on('submit(deductSubmit)', function (obj) {
        var url = "tenantPay/deduct"
        var postData = obj.field
        console.log(postData)
        postAjaxReq(url, {
          "tenant_pay_id": postData.tenantPayId,
          "trueAmount": postData.trueAmount,
          "remark": postData.remark
        }, function (res) {
          if (res.code == 1) {
            layer.closeAll();
            table.reload('payPmList')
            layer.msg("扣款转账成功")
          } else {
            layer.msg(res.msg);
          }
        })
      });

      $("#search").click(function () {
        var ammeterId = $("#ammeterId").val();
        var timeBegin = null;
        var timeEnd = null;
        if (!isEmpty($("#time").val())) {
          var split = $("#time").val().split(" - ");
          timeBegin = split[0].trim();
          timeEnd = split[1].trim();
        }
        var status = $("#status").val();
        table.reload('payPmList', {
          page: {curr: 1},
          where: {
            ammeterId: ammeterId,
            timeBegin: timeBegin,
            timeEnd: timeEnd,
            status: status
          }
        })
      });
    });
  });

  $("#cancel").on("click", function () {
    layer.closeAll()
  });

  function hideFun() {
    layer.closeAll();
    userId = null
  }

  function hideWithReset(hide, reset) {
    $(hide).hide()
    $(reset)[0].reset()
  }
</script>
</body>
</html>
